import React, { PureComponent } from 'react';
import moment from 'moment';
import { Button, Anchor, Row, Col, message, Spin, Card } from 'antd';
import { connect } from 'dva';
import FooterToolbar from '@/components/FooterToolbar';
import HdlRemark from '@/pages/components/HdlRemark';
import PageHeaderWrapper from '@/components/PageHeaderWrapper'; // 引入头部组件
import ProRecording from '@/pages/components/Problem/ProblemPage/ProRecording';
import DescriptionList from '@/components/DescriptionList';
import EmpInfor from './EmpInfor';
import SocialAccuInfor from './SocialAccuInfor';
import MatInfor from './MatInfor';
import ServiceRemark from '../../components/ServiceRemark';
import EmpUpdateModle from './EmpUpdateModle';
import SingleModal from './SingleModal';
import ContactInfor from './ContactInfor';

const { Description } = DescriptionList;
const { Link } = Anchor;
@connect(({ addempsocial, loading }) => ({
  addempsocial,
  loading: loading.models.addempsocial,
}))
class DetailInfor extends PureComponent {
  constructor(props) {
    super(props);
    this.state = { visHdlRemark: false, visUpdate: false, bigShow: false, addDetId: '' };
  }

  componentDidMount() {
    const { dispatch, location } = this.props;
    const { addDetId } = location.query;
    this.setState({
      addDetId,
    });
    dispatch({
      type: 'addempsocial/getInfor',
      payload: { addDetId },
    });
    // 字典
    dispatch({
      type: 'addempsocial/getDict',
      payload: { addDetId },
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    const permars = {
      detail: {
        sendInfoDetDto: {},
        persion: {},
        mkupPayDets: [],
        insOrdYmDets: [],
        insRemarks: [],
        matSubs: [],
      },
      remarkData: [],
      insData: [],
      singleInfo: {},
      dictData: { addDetInfoList: [{ suppInsAccos: [] }], addTypes: [], joinDtos: [] },
      requiredFlag: false,
      injSecAccolist: [],
    };
    dispatch({
      type: 'addempsocial/upDate',
      payload: permars,
    });
  }

  getInjList = insAccoId => {
    const {
      dispatch,
      addempsocial: { requiredFlag },
    } = this.props;
    const { addDetId } = this.state;
    if (!requiredFlag) return;
    // 工伤二级户
    dispatch({
      type: 'addempsocial/getInjList',
      payload: { insAccoId, addDetId },
    });
  };

  visUpdateModle = flag => {
    const { dispatch } = this.props;
    dispatch({
      type: 'addempsocial/updateModalData',
      payload: {
        injSecAccoDatalist: [],
      },
    });
    this.setState({
      visUpdate: !!flag,
    });
  };

  updateInfo = () => {
    const { dispatch, location } = this.props;
    const { addDetId } = location.query;
    dispatch({
      type: 'addempsocial/getIns',
      payload: { addDetId },
    }).then(res => {
      if (res.success) {
        this.visUpdateModle(true);
      }
    });
  };

  // 修改提交数据
  submitUpdateData = values => {
    const {
      dispatch,
      location,
      addempsocial: { detail },
    } = this.props;
    const { addDetId } = location.query;
    const returnedTarget = Object.assign(values, {
      beginDateYM: values.beginDateYM && moment(values.beginDateYM).format('YYYYMMDD'),
      declareInsId: values.declareAccuId,
      declareAccuId: undefined,
    });
    if (!values.beginDateYM) delete returnedTarget.beginDateYM;
    this.visUpdateModle();
    dispatch({
      type: 'addempsocial/updateIns',
      payload: { ...returnedTarget, addDetId, taskId: detail.persion.taskId },
      callback: response => {
        if (response) {
          message.success('修改成功！');
          dispatch({
            type: 'addempsocial/getInfor',
            payload: { addDetId },
          });
        } else {
          message.warning(`${response.message || '修改失败！'}`);
        }
      },
    });
  };

  handleModalVisible = flag => {
    this.setState({
      visHdlRemark: !!flag,
    });
  };

  addHdl = () => {
    this.handleModalVisible(true);
    const {
      dispatch,
      addempsocial: { detail },
    } = this.props;
    dispatch({
      type: 'addempsocial/getRemark',
      payload: { sendId: detail.persion.sendId, busiId: detail.persion.insEmpOrdId },
    });
  };

  // 提交数据
  submitData = values => {
    const { dispatch, location } = this.props;
    const { addDetId } = location.query;
    dispatch({
      type: 'addempsocial/addHdlRemark',
      payload: { ...values, busiId: addDetId },
      callback: response => {
        if (response) {
          message.success('办理备注成功！');
          this.handleModalVisible();
        } else {
          message.warning(`${response.message || '办理备注失败！'}`);
        }
      },
    });
  };

  setSingleModalShow = persion => {
    this.setState({ bigShow: true });
    const { dispatch } = this.props;
    dispatch({
      type: 'addempsocial/getSingle',
      payload: { custInsAccoId: persion.insAccoId },
    });
  };

  bigHandleOk = () => {
    this.setState({ bigShow: false });
  };

  bigHandleCancel = () => {
    this.setState({ bigShow: false });
  };

  close = () => {
    window.history.back();
  };

  render() {
    const {
      loading,
      addempsocial: {
        detail,
        dictData,
        insData,
        remarkData,
        singleInfo,
        requiredFlag,
        injSecAccoDatalist,
      },
    } = this.props;
    const { persion, laborContDto } = detail;
    const responseLaborCont=laborContDto&&laborContDto.responseLaborCont
    const { visHdlRemark, visUpdate, bigShow } = this.state;
    return (
      <div>
        <PageHeaderWrapper>
          <Spin tip="Loading..." spinning={loading}>
            <Anchor onClick={e => e.preventDefault()} targetOffset={50}>
              <Row type="flex" justify="space-around">
                <Col>
                  <Link href="#sendInfor" title="派单信息" />
                </Col>
                <Col>
                  <Link href="#basicma" title="基本信息" />
                </Col>
                <Col>
                  <Link href="#socialInfor" title="社保信息" />
                </Col>
                <Col>
                  <Link href="#responseLaborContMsg" title="合同信息" />
                </Col>
                <Col>
                  <Link href="#materialInfor" title="材料信息" />
                </Col>
                <Col>
                  <Link href="#contactRecord" title="联系记录" />
                </Col>
                <Col>
                  <Link href="#hdlRemark" title="办理备注" />
                </Col>
                <Col>
                  <Link href="#proRecording" title="问题记录" />
                </Col>
              </Row>
            </Anchor>

            <EmpInfor sendInfoDetDto={detail.sendInfoDetDto} persion={detail.persion} />
            <SocialAccuInfor
              social={1}
              addEmp={1}
              persion={detail.persion}
              assData={detail.insOrdYmDets}
              payData={detail.mkupPayDets}
              updateInfo={this.updateInfo}
              sendInfoDetDto={detail.sendInfoDetDto}
              setSingleModalShow={this.setSingleModalShow}
            />
            <Card title={<span id="responseLaborContMsg">合同信息</span>}>
              {laborContDto&& responseLaborCont? (
                <DescriptionList>
                  <Description term="合同签订日期">
                    {(responseLaborCont && responseLaborCont.signDate && moment(responseLaborCont.signDate).format('YYYY-MM-DD')) || '--'}
                  </Description>

                  <Description term="是否已签订电子劳动合同">
                    {(responseLaborCont && responseLaborCont.electrSignFlagName) || '--'}
                  </Description>

                  <Description term="岗位">
                    {(responseLaborCont && responseLaborCont.wkJob) || '--'}
                  </Description>

                  <Description term="有无固定期限">
                    {(responseLaborCont && responseLaborCont.fixedDeadlnFlagName) || '--'}
                  </Description>

                  <Description term="合同开始日期">
                    {(responseLaborCont && responseLaborCont.contBeginDate && moment(responseLaborCont.contBeginDate).format('YYYY-MM-DD')) || '--'}
                  </Description>

                  <Description term="合同结束日期">
                    {(responseLaborCont && responseLaborCont.contEndDate && moment(responseLaborCont.contEndDate).format('YYYY-MM-DD')) || '--'}
                  </Description>

                  <Description term="合同期劳动报酬">
                    {(responseLaborCont && responseLaborCont.contWage) || '--'}
                  </Description>
                    
                </DescriptionList>
                    ): responseLaborCont && (
                      <DescriptionList>
                        <Description term="合同签署方式">
                          {(responseLaborCont && responseLaborCont.contSignWayName) || '--'}
                        </Description>

                        <Description term="合同类型">
                          {(responseLaborCont && responseLaborCont.contTypeName) || '--'}
                        </Description>

                        <Description term="合同签订日期">
                          {(responseLaborCont && responseLaborCont.signDate &&moment(responseLaborCont.signDate).format('YYYY-MM-DD')) || '--'}
                        </Description>

                        <Description term="是否已签订电子劳动合同">
                          {(responseLaborCont && responseLaborCont.electrSignFlagName) || '--'}
                        </Description>

                        <Description term="岗位">
                          {(responseLaborCont &&responseLaborCont.wkJob) || '--'}
                        </Description>

                        <Description term="合同编号">
                          {(responseLaborCont && responseLaborCont.contNo) || '--'}
                        </Description>

                        <Description term="有无固定期限">
                          {(responseLaborCont && responseLaborCont.contWage) || '--'}
                        </Description>
                        
                        <Description term="合同开始日期">
                          {(responseLaborCont && responseLaborCont.contBeginDate && moment(responseLaborCont.contBeginDate).format('YYYY-MM-DD')) || '--'}
                        </Description>
                        
                        <Description term="合同结束日期">
                          {(responseLaborCont && responseLaborCont.contEndDate && moment(responseLaborCont.contEndDate).format('YYYY-MM-DD')) || '--'}
                        </Description>
                        
                        <Description term="有无试用期">
                          {(responseLaborCont && responseLaborCont.probtnFlagName) || '--'}
                        </Description>

                        <Description term="试用期开始时间">
                          {(responseLaborCont && responseLaborCont.probtnBeginDate&&moment(responseLaborCont.probtnBeginDate).format('YYYY-MM-DD')) || '--'}
                        </Description>

                        <Description term="试用期结束时间">
                          {(responseLaborCont && responseLaborCont.probtnEndDate &&moment(responseLaborCont.probtnEndDate).format('YYYY-MM-DD')) || '--'}
                        </Description>

                        <Description term="合同期劳动报酬">
                          {(responseLaborCont && responseLaborCont.contWage) || '--'}
                        </Description>

                        <Description term="试用期劳动报酬">
                          {(responseLaborCont && responseLaborCont.probtnWage) || '--'}
                        </Description>

                        <Description term="工时">
                          {(responseLaborCont && responseLaborCont.laborHourName) || '--'}
                        </Description>

                        <Description term="工作地点">
                          {(responseLaborCont && responseLaborCont.wkLoc) || '--'}
                        </Description>

                        <Description term="工作内容">
                          {(responseLaborCont && responseLaborCont.wkContent) || '--'}
                        </Description>

                        <Description term="是否做入职体检">
                          {(responseLaborCont && responseLaborCont.entryMedExamFlagName) || '--'}
                        </Description>

                      </DescriptionList>
              ) || ('暂无数据')}
            </Card>
            <MatInfor matSubs={detail.matSubs} persion={detail.persion} />
            <ContactInfor entryContRcrds={detail.entryContRcrds} />
            <HdlRemark hdlRemark={detail.insRemarks} />
            <ProRecording proRecording={detail.probDets} />
            <ServiceRemark
              visHdlRemark={visHdlRemark}
              handleModalVisible={this.handleModalVisible}
              submitData={this.submitData}
              detailHdl={remarkData}
            />
          </Spin>

          <EmpUpdateModle
            addEmp={1}
            social={1}
            injSecAccoDatalist={injSecAccoDatalist}
            visUpdate={visUpdate}
            requiredFlag={requiredFlag}
            visUpdateModle={this.visUpdateModle}
            submitUpdateData={this.submitUpdateData}
            dictData={dictData}
            insData={insData}
            getInjList={this.getInjList}
          />

          <SingleModal
            isSocial
            dataInfo={singleInfo}
            visible={bigShow}
            onOk={this.bigHandleOk}
            onCancel={this.bigHandleCancel}
          />
          <FooterToolbar>
            {/* 待申报、申报中、已申报、申报失败显示添加办理备注按钮。 */}
            {persion.execState === 8 ? null : (
              <Button style={{ marginLeft: 8 }} onClick={this.addHdl}>
                添加办理备注
              </Button>
            )}
            <Button style={{ marginLeft: 8 }} onClick={this.close}>
              返回
            </Button>
          </FooterToolbar>
        </PageHeaderWrapper>
      </div>
    );
  }
}

export default DetailInfor;
